<template>
	<view class="lazy-image">
		<image  class="real-image" @load="onLoaded" :src="realSrc" @error="errorimg" mode="aspectFit"></image>
		<view :class="loaded?'loaded':''">
			<image class="real-image" @tap="previewImage"  :data-src="realSrc" :src="placeholdSrc" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			
			realSrc: {
				type: String,
				default: ""
			},
			img_urls: Array
		},
		data() {
			return {
				loaded: false,
				placeholdSrc:''
			}
		},
		created() {
			this.placeholdSrc=this.defimg;
		},
		methods: {
			
			errorimg(){
				this.realSrc=this.defimg;
			},
			onLoaded() {
				this.loaded = true
			},
			previewImage: function() {
				if(this.img_urls!=null){
				uni.previewImage({
					current: this.realSrc,
					urls:this.img_urls
				});}
			}

		}

	}
</script>

<style lang="scss" scoped>
	.lazy-image {
		height: 100%;
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		image {
			width: 100%;
		}

		view {
			// background-color: #eee;
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			transition: opacity 0.4s linear;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.loaded {
			opacity: 0;
		}
	}
</style>
